<template>
	<v-layout type="main">
		<div class="alike-lis-header">
			<div class="lis-header-left">
				<div class="add-btn" @click="$router.push({ path: '/gameDistributedTraining/detail' })">+ 新增</div>

				<div class="btns-switch">
					<div @click="isCard = true">
						<img src="@/assets/img/List_card.png" v-if="isCard" />
						<img src="@/assets/img/list_nocard.png" v-else />
					</div>
					<div @click="isCard = false">
						<img src="@/assets/img/list_nolist.png" v-if="isCard" />
						<img src="@/assets/img/list_list.png" v-else />
					</div>
				</div>

				<div class="search-box">
					<el-input
						prefix-icon="el-icon-search"
						v-model="Pagedata.name"
						class="search"
						placeholder=""
						@input="searchChange"
					/>
				</div>
			</div>
		</div>

		<div class="table-layout" v-if="!isCard">
			<el-table :data="tableData" class="myself-table">
				<el-table-column prop="name" label="名称">
					<template slot-scope="{ row }">
						<el-popover placement="right-start" width="320" trigger="hover">
							<row-data :row="row" />
							<el-button
								type="text"
								@click="$router.push({ path: '/gameDistributedTraining/code', query: { id: row.id } })"
								slot="reference"
								>{{ row.name }}</el-button
							>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态">
					<template slot-scope="{ row }">
						<span :class="['alick-list-status', row.status]">●{{ statusMap[row.status] }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="name" label="资源配置" /> -->
				<el-table-column prop="simulation_node_group.image.name" label="仿真" />
				<el-table-column prop="scenario.name" label="想定" />
				<el-table-column prop="update_time" label="更新时间" />
				<el-table-column label="运行时长">
					<template slot-scope="{ row }">
						{{ countRanTime(row.resource && row.resource.start_time) }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="{ row }">
						<!--<el-button type="text" @click="put(row)">修改</el-button>-->
						<!-- <el-button type="text" @click="del(row)">删除</el-button> -->
						<!-- <el-popconfirm title="您确定要删除吗？" @onConfirm="del(row)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm> -->
						<el-popover placement="top" width="80" trigger="click" v-model="row.visible">
								<p>您确定要删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
									<el-button type="primary" size="mini" @click="delTable(row)">确定</el-button>
								</div>
								<el-button type="text" slot="reference">删除</el-button>
							</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- <div class="alike-lis-both">
      <ul class="clearfix" v-if="!list_flag">
        <li v-for="(item, index) in tableData" :key="index" class="lis-both-item"
          @click="$router.push({ path: '/gameDistributedTraining/code', query: { id: item.id } })">
          <v-image class="dimg" :src="item.avatar" />
          <div class="word-box">
            <p class="title">{{ item.name }}</p>
            <p class="hint" :title="item.desc">{{ item.desc }}</p>
            <p class="status-box">
              <span :class="['alick-list-status', item.status]">●{{ statusMap[item.status] }}</span>
              <span class="count-ran-time" v-if="item.resource && item.resource.start_time">运行时长：{{
                countRanTime(item.resource && item.resource.start_time) }}</span>
            </p>
            <i class="el-icon-delete delete-btn" @click.stop="del(item)"></i>
          </div>
        </li>
      </ul>
    </div> -->

		<ul class="alike-lis" v-else>
			<li v-for="(item, index) in tableData" :key="index">
				<div class="alike-lis-box">
					<div class="alike-lis-pic" @click="$router.push({ path: '/gameDistributedTraining/code', query: { id: item.id } })">
						<v-image :src="item.avatar ? item.avatar : require('@/assets/img/drone2.jpg')" alt="" />
					</div>
					<div class="alike-lis-word">
						<p class="alike-lis-title">
							<span>
								<span @click="$router.push({ path: '/gameDistributedTraining/code', query: { id: item.id } })">
									{{ item.name }}
								</span>
								<template v-if="typeof item.status === 'string'">
									<el-tag
										type="danger"
										effect="dark"
										size="mini"
										v-if="['terminated', 'failed', 'Failed'].includes(item.status)"
									>
										{{ statusMap[item.status] }}
									</el-tag>
									<el-tag
										type="success"
										effect="dark"
										size="mini"
										v-else-if="['completed', 'Succeeded', 'running', 'Running'].includes(item.status)"
									>
										{{ statusMap[item.status] }}
									</el-tag>
									<el-tag type="warning" effect="dark" size="mini" v-else>
										{{ statusMap[item.status] }}
									</el-tag>
								</template>
							</span>

							<el-popover placement="top" width="80" trigger="click" v-model="item.visible">
								<p>您确定要删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
									<el-button type="primary" size="mini" @click="del(item)">确定</el-button>
								</div>
								<i slot="reference" class="el-icon-delete delete-btn" />
							</el-popover>
						</p>

						<p class="alike-lis-hint">{{ item.desc }}</p>

						<div class="alike-lis-user">
							<span class="user-name">创建人：{{ item.create_user.nick_name }}</span>
							<span class="date">{{ item.create_time }}</span>
						</div>
					</div>
				</div>
			</li>
		</ul>

		<div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
			<el-pagination
				background
				class="pagination"
				layout="total, prev, pager, next, jumper"
				:page-size="Pagedata.pageSize"
				:current-page.sync="Pagedata.pageNum"
				@current-change="handleCurrentChange"
				:total="Pagedata.total"
			>
			</el-pagination>
		</div>
	</v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getGameExperiment, delGameExperiment } from "@/api/gameExperiment";

export default {
	data() {
		return {
			showThisActive: 1,
			list_flag: false,
			tableData: [],
			Pagedata: {
				pageNum: 1,
				pageSize: 12,
				total: 0,
				name: "",
			},
			isCard: true,
		};
	},
	async created() {
		this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum, name: this.searchValue };
		this.getData();
		this.$EventBus.$on("experiment", (e) => {
			console.log(e);
			this.getData();
		});
	},
	computed: mapState({
		pageNum: (state) => state.menuStore.pageData.pageNum,
		searchValue: (state) => state.menuStore.searchValue,
	}),
	methods: {
		...mapActions(["updatePageNum", "updateSearch"]),
		async getData() {
			let res = await getGameExperiment({ ...this.Pagedata, preCode: 2 });
			this.tableData = res.data.list;
			this.Pagedata.total = res.data.total;
		},
		searchChange() {
			this.updatePageNum(1);
			this.Pagedata.pageNum = 1;
			this.updateSearch(this.Pagedata.name);
			this.getData();
		},
		put({ id }) {
			this.$router.push({
				path: "/gameDistributedTraining/detail",
				query: { id },
			});
		},
		async del(row) {
			// let res = await this.$isDel();
			// if (res) {
			await delGameExperiment(row);
			this.getData();
			// }
		},
		handleCurrentChange(val) {
			this.Pagedata.pageNum = val;
			this.updatePageNum(val);
			this.getData();
		},
		async delTable(row) {
			await delGameExperiment(row);
			this.getData();
		},
	},
	destroyed() {
		this.$EventBus.$off("experiment");
	},
};
</script>
<style lang="less" scoped></style>
